<template>
	<view>
		<view style="margin-top: 20rpx;">
			<view class="biao" style="width: 100%;display: flex;">
				<span class="biao_span">|</span> 
				<text class="cardTitle">{{text.order_daojishi}} </text> 
			</view>
			<view style="width: 100%;margin:0rpx 20rpx;padding: 20rpx 0rpx;" v-if="is_stop_countdown==1">
				{{text.order_complete}}
			</view>
			<view style="width: 100%;margin:0rpx 20rpx;padding: 20rpx 0rpx;" v-else>
				<view v-if="order.close_status==1">
					{{$t("订单已关闭")}}
				</view>
				<view v-else-if="order.terminate_status==1">
					{{$t("订单已关闭")}}
				</view>
				<view v-else-if="order.status==3">
					{{$t("订单已关闭")}}
				</view>
				<view v-else-if="order.status==5">
					{{$t("订单已关闭")}}
				</view>
				<view v-else-if="order.join_order_id==0||order.orderJoin.countdown_time==0">
					{{$t("暂未开始")}}	
				</view>
				<view v-else>
					<u-count-down v-if="loading" :timestamp="countdownTime" separator="zh" :show-border="true" font-size="28" color="#fff" border-color="red" @change="change" bg-color="red"></u-count-down>	
				</view>
			</view>
			<view style="width: 100%;margin:0rpx 20rpx; color: #999999; padding: 20rpx 0rpx;" v-if="order.countdownTime==0">
				{{$t("上传接货证明后，订单倒计时开始")}}
			</view>
			<view style="width: 100%;margin:0rpx 20rpx; color: #999999; padding: 20rpx 0rpx;" v-else-if="order.countdownTime==0">
				{{text.wait_complete}}
			</view>
		</view>
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	
	export default {
		components: {
			
		},
		props: {
			order: {
				type: [Array, Object, Number, String],
				default: ''
			},
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				//文字
				text:{			
					order_complete:this.$t('任务已完成'),
					order_daojishi:this.$t('订单倒计时'),
					wait_complete:this.$t('双方上传收付款证明后订单进入倒计时')
				},
				countdownTime:0,
				loading: true,
				is_stop_countdown:0,
			}
		},
		mounted() {
			console.log(this.order);
			if(this.order){
				this.countdownTime=this.order.countdownTime
				if(this.order.orderJoin!=null){
					this.is_stop_countdown=this.order.orderJoin.is_stop_countdown
				}
			}
		},
		methods:{
			change(timestamp) {
				this.loading = false
				// console.log(timestamp);
				if(timestamp==0){
					this.is_stop_countdown=1;
				}
				this.loading = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cardBox {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		// box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}
	.flex{width: 100%;display: flex;}
	.biao{margin-top: 0rpx; width: 80%; margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;}
	.biao_span{color:darkorange ; font-size: 18px; margin-right: 5px;}
	.cardTitle{font-size: 24rpx; width: 94%;padding-top: 6rpx;}
	.order_img{width: 160rpx;height: 160rpx;border-radius: 20rpx;}
	.close_image2{
		width: 120rpx;height: 120rpx;border-radius: 20rpx; margin-right: 20rpx; margin-top: 20rpx; float: left;
	}
</style>